<template>
  <div>
    <!-- 查询结果 -->
    <div class="maxWidth flexBet main">
      <leftPop v-on="$listeners" />
      <div style="width: 970px">
        <div class="inquire_box flexBet padLR20">
          <span class="inquire fontS20 fonBold">查询结果</span>
          <slot name="rightTag"></slot>
        </div>
        <div class="from_box wBgColor">
          <slot name="table_nav"></slot>
          <a-locale-provider :locale="zhCN">
            <a-table
              :customRow="customRow"
              :columns="columns"
              :data-source="data"
              :pagination="{ pageSize: 10 }"
              bordered
              :scroll="{ x: 100 }"
              :loading="tableLoading"
              @change="onChange"
            >
              <a slot="name" slot-scope="text" @click="goInfo(text)">{{
                text.baseName
              }}</a>
              <div slot="kind" slot-scope="text">
                <!-- {{text}} -->
                {{
                  text == "1"
                    ? "新闻"
                    : text == "2"
                    ? "专题"
                    : text == "3"
                    ? "综合文体"
                    : "无"
                }}
              </div>
              <template slot="action" slot-scope="text, record">
                <span>
                  <slot name="rightHtml" :record="record"></slot>
                </span>
              </template>
            </a-table>
          </a-locale-provider>
        </div>
      </div>
    </div>
    <div class="flexCon marT37 fontS14 color3F">
      Copyright @2021 All Rights Reserved
    </div>
  </div>
</template>
<script>
import zhCN from "ant-design-vue/es/locale-provider/zh_CN";
import leftPop from "@/components/pop/leftPop.vue";
function onChange(pagination, filters, sorter) {
  console.log("params", pagination, filters.name, sorter);
}
export default {
  components: {
    leftPop,
  },
  props: {
    columns: {
      type: Array,
      default: Array,
    },
    data: {
      type: Array,
      default: Array,
    },
    tableLoading: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      zhCN,
    };
  },
  methods: {
    onChange,
    //设置表格隔行变色
    customRow(record, index) {
      return {
        style: {
          // 字体颜色
          color: record.remarkDesc ? record.remarkDesc.fontColor : "#262626",
          // 行背景色
          "background-color": index % 2 == 0 ? "#FFFFFF" : "#FAFAFA",
        },
      };
    },
    showPopup() {},
    goInfo(item) {
      console.log(item);
      let name;
      if (item.oneTypeId == 1) {
        name = "DeclareDetails";
      } else if (item.twoTypeId == 1) {
        name = item.threeTypeId == 1 ? "highVideoReport" : "highVideoBroadcast";
      } else if (item.twoTypeId == 2) {
        name =
          item.threeTypeId == 1 ? "jlhighVideoBroadcast" : "jlhighVideoReport";
      }
      this.$router.push({
        name,
        params: {
          baseId: item.baseId,
          type: "info",
        },
        query: {
          prizeTypeId: item.prizeTypeId,
        },
      });
      // this.$router.push({
      //   name: "DeclareDetails",
      //   params: {
      //     baseId: item.baseId,
      //     type: "info",
      //   },
      // });
    },
  },
};
</script>
<style>
.ant-table-thead > tr > th {
  color: #fff;
  background: #477fd3;
  font-size: 20px;
}
.main {
  align-items: flex-start;
  margin-top: 100px;
}
.ant-table-thead > tr > th .ant-table-filter-selected.anticon,
.ant-table-thead > tr > th .anticon-filter,
.ant-table-thead > tr > th .ant-table-filter-icon {
  color: #fff;
}
</style>